<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #25263b;
				height:100%;
				margin: 0;
				padding: 0;
			}
			.logo{
				flex: 1;
			    background-image: url(../images/main/logo@2x.png);
			    background-position: center;
			    background-size: 80%;
			    background-repeat: no-repeat;
			}
			.menu{
				display: flex;
    				flex-direction: column;
    				height: 100%;
    				padding-bottom: 10%;
			}
			.menu-item{
				font-size: 2vw;
				flex: 1;
				display: flex;
			    justify-content: center;
			    flex-direction: column;
			    padding-left: 5.5vw;
			    color: #8f8f8f;
			    border-left: 5px solid transparent;
			    background-repeat: no-repeat;
			    background-size: 2vw;
			    background-position: 2.5vw 50%;
			}
			.menu-item.active{
				background-color: #12111e;
				border-left: 4px solid #3383eb;
				color: #fff;
			}
			.menu-item.jiaozhun{
				background-image: url(../images/main/icon/jiaozhun_b@2x.png);
			}
			.menu-item.jiaozhun.active{
				background-image: url(../images/main/icon/jiaozhun@2x.png);
			}
			.menu-item.jilu{
				background-image: url(../images/main/icon/jilu@2x.png);
			}
			.menu-item.jilu.active{
				background-image: url(../images/main/icon/jilu_l@2x.png);
			}
			.menu-item.jiluyi{
				background-image: url(../images/main/icon/jiluyi@2x.png);
			}
			.menu-item.jiluyi.active{
				background-image: url(../images/main/icon/jiluyi_l@2x.png);
			}
			.menu-item.qifen{
				background-image: url(../images/main/icon/qifen@2x.png);
			}
			.menu-item.qifen.active{
				background-image: url(../images/main/icon/qifen_l@2x.png);
			}
			.menu-item.changgui{
				background-image: url(../images/main/icon/changgui@2x.png);
			}
			.menu-item.changgui.active{
				background-image: url(../images/main/icon/changgui_l@2x.png);
			}
			.menu-item.guanyu{
				background-image: url(../images/main/icon/guanyu@2x.png);
			}
			.menu-item.guanyu.active{
				background-image: url(../images/main/icon/guanyu_l@2x.png);
			}
		</style>
	</head>

	<body>
		<div class="mui-content mui-row" style="height:100%;background-color: #25263b;">
			<div class="mui-col-xs-3" style="height: 100%; background-color: #1e2030;width:20%;">
				<div class="menu">
					<div class="logo"></div>
					<div class="menu-item jiaozhun active" href="jiaozhuncs.html">
						<span>校准参数</span>
					</div>
					<div class="menu-item jilu" href="tab-webview-subpage-chat.html">
						<span>记录设置</span>
					</div>
					<div class="menu-item jiluyi" href="tab-webview-subpage-contact.html">
						<span>记录仪</span>
					</div>
					<div class="menu-item qifen" href="tab-webview-subpage-setting.html">
						<span>气氛计算器</span>
					</div>
					<div class="menu-item changgui" href="tab-webview-subpage-contact.html">
						<span>常规设置</span>
					</div>
					<div class="menu-item guanyu" href="tab-webview-subpage-setting.html">
						<span>关于</span>
					</div>
				</div>
			</div>
			
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript" charset="utf-8">
			//mui初始化
			mui.init();
			var subpages = ['jiaozhuncs.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
			var subpage_style = {
				left: '20%',
				right: '0px'
			};
			 //创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				for (var i = 0; i < subpages.length; i++) {
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
					if (i > 0) {
						sub.hide();
					}
					self.append(sub);
				}
				var width = $api.cssVal($api.dom('body'), 'width');
				var height = $api.cssVal($api.dom('body'), 'height');
				console.log('body width:'+width)
				console.log('body height:'+height)
			});
			 //当前激活选项
			var activeTab = subpages[0];
			 //选项卡点击事件
			mui('.menu').on('tap', '.menu-item', function(e) {
				var targetTab = this.getAttribute('href');
				if (targetTab == activeTab) {
					return;
				}
				document.querySelector(".menu-item.active").classList.remove('active');
				this.classList.add('active');
				//隐藏当前;
				plus.webview.hide(activeTab);
				//显示目标窗口
				plus.webview.show(targetTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
			});
			 
		</script>
	</body>

</html>